<div id="app">
    <el-table :data="tableData" style="width: 100%">
        <el-table-column label="主图" width="80">
            <template scope="scope">
                <img :src="scope.row.thumb_url" width="40" />
            </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" width="">
        </el-table-column>
        <el-table-column prop="price" label="价格" width="">
        </el-table-column>
        <el-table-column prop="priority" label="序号" width="">
        </el-table-column>
        <el-table-column prop="category.title" label="分类" width="">
        </el-table-column>
        <el-table-column prop="createdAt" label="添加日期">
        </el-table-column>
        <el-table-column label="操作" width="200">
            <template scope="scope">
                <el-button-group>
                    <el-button type="primary" size="small" icon="edit" @click.native.prevent="editRow(scope.$index, tableData)">编辑</el-button>
                    <el-button type="danger" size="small" icon="delete" @click.native.prevent="deleteRow(scope.$index, tableData)">删除</el-button>
                </el-button-group>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination class="pagination" @current-change="handleCurrentChange" :page-size="pageSize" layout="total, prev, pager, next" :total="total">
    </el-pagination>
</div>
<script>
new Vue({
    el: '#app',
    data: {
        tableData: [],
        total: <%=total%>,
        pageSize: <%=pageSize%>,
        pageIndex: <%=pageIndex%>
    },
    mounted: function() {
        this.loadData();
    },
    methods: {
        loadData: function() {
            this.$http.post('./list', { pageIndex: this.pageIndex }).then(response => {
                this.tableData = response.body;
            });
        },
        handleCurrentChange: function(pageIndex) {
            console.log(pageIndex);
            this.pageIndex = --pageIndex;
            this.loadData();
        },
        // 编辑
        editRow: function(index, rows) {
            var objectId = rows[index].objectId;
            window.location.href = '/goods/add?objectId=' + objectId;
        },
        // 删除
        deleteRow: function(index, rows) {
            this.$confirm('确认删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var objectId = rows[index].objectId;
                this.$http.post('/goods/delete', { objectId: objectId }).then(response => {
                    this.$message({
                        message: '删除成功'
                    });
                    this.loadData();
                });
            }).catch(cancel => cancel);
        }
    }
});
</script>